<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>账户总览界面</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <script th:src="@{/bootstrap/js/jquery.min.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
</head>
<body onload="loadPage()">
<div class="container">
    <div class="panel panel-info text-center" style="margin-top: 50px;">
        <div class="panel-heading" style="letter-spacing:30px;">
            <h3>账户总览</h3>
        </div>
        <div class="panel-body">

            <table class="table table-condensed table-responsive table-hover text-left">
                <thead class="tab-header-background">
                <tr>
                    <th scope="col" colspan="4" style="text-align: center;font-size: 18px;font-weight: bold">该卡本月账单</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th scope="row" style="width: 25%;">#</th>
                    <th scope="row" style="width: 25%;">服务名称</th>
                    <th scope="row" style="width: 25%;">查询结果</th>
                    <th scope="row" style="width: 25%;">备注</th>
                </tr>
                <tr>
                    <th scope="row">1</th>
                    <td>卡号</td>
                    <td>
                        <select class="form-control" id="cardnum">
                            <option th:each="myCredit:${myCredits}" th:text="${myCredit.cardnum}" ></option>
                        </select>
                    </td>
                    <td id="cardnumSelect">
                        <a th:href="@{/userInfo/getUserById(cardnum=${ccmsCredit.cardnum})}">点击可查看信用卡详情</a>
                    </td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>本卡可用额度</td>
                    <td id="creditLimit" th:text="${ccmsCredit.creditLimit}"></td>
                    <td></td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>本卡本期账单金额</td>
                    <td id="debt" th:text="${ccmsCredit.debt}"></td>
                    <td></td>
                </tr>
                <tr>
                    <th scope="row">4</th>
                    <td>本卡本期到账还款日</td>
                    <td id="repayment" th:text="${ccmsCredit.repayment}"></td>
                    <td></td>
                </tr>
                </tbody>
            </table>
            <div class="panel-footer text-right">
                八仙过海项目组版权所有
            </div>
        </div>
    </div>
</div>
</body>
<script>
    function loadPage() {
        $("#creditLimit").text(milliFormat( $("#creditLimit").text()));
        $("#debt").text(milliFormat( $("#debt").text()));
    }

    $("#cardnum").change(function () {
        var cardnum = $("#cardnum").val();
        $.ajax({
            url:"/credit/selectCard?cardnum="+cardnum,
            success:function (data) {
                //alert(data.data)
                //console.log(data.data);
                $("#creditLimit").text(milliFormat(data.data.creditLimit));
                $("#debt").text(milliFormat(data.data.debt));
                $("#repayment").text(data.data.repayment);
                var cardnumSelect = "";
                cardnumSelect = "<a href='../userInfo/getUserById?cardnum="+data.data.cardnum+"'>点击可查看信用卡详情</a>"
                $("#cardnumSelect").html(cardnumSelect)
            }
        })
    })

    //数字千位分隔符，可操作小数
    function milliFormat(num) {
        return num && num.toString()
            .replace(/\d+/, function(s){
                return s.replace(/(\d)(?=(\d{3})+$)/g, '$1,')
            })
    }
</script>
</html>